<template>
  <div>
    <Table ref="table" :tableData="tableData" :columns="columns" :operationColumn="operationColumn" :buttons="buttons"
      :pagination="pagination" @page-change="handlePageChange" @size-change="handleSizeChange" />
  </div>
</template>

<script>
import Table from "@/components/Table.vue"; // 引入表格组件

export default {
  components: {
    Table
  },
  data() {
    return {
      // 表格行数据列表
      tableData: [
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
      ],
      //表头
      columns: [
        { label: '日期', prop: 'date', width: 'auto' },
        { label: '姓名', prop: 'name', width: 'auto' },
        { label: '地址', prop: 'address', width: 'auto', }
      ],
      // 操作列按钮：直接传入方法比父子监听更方便
      operationColumn: {
        width: 'auto',
        operationButtons: [
          { label: '编辑', type: 'primary', action: this.editRow, plain: true, },
          { label: '删除', type: 'danger', action: this.deleteRow, plain: true, }
        ],
      },
      // 底部按钮：直接传入方法比父子监听更方便
      buttons: [
        { label: '切换第二第三行', action: this.toggleSelectionRows },
        { label: '取消选择', action: this.clearSelection }
      ],
      // 分页
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 5,    // 每页显示的条数（修改为5）
        total: 0        // 总记录数：数据库能拿到的最多记录数
      }
    };
  },
  mounted() {
    //初始化，网络请求第一页数据：请求5条
    this.tableData = [
      { date: '2016-05-04', name: '0', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-03', name: '1', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-02', name: '2', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-04', name: '3', address: '上海市普陀区金沙江路 1518 弄' },
      { date: '2016-05-04', name: '4', address: '上海市普陀区金沙江路 1518 弄' },]
    //更新总条数
    this.pagination.total = 1000//接口返回这个
  },
  methods: {
    editRow(row) {
      console.log('编辑行', row);
    },
    deleteRow(row) {
      console.log('删除行', row);
    },
    //切换选中的行
    toggleSelectionRows() {
      //切换指定的几行的选中状态
      this.$refs.table.toggleSelection([this.tableData[1], this.tableData[2]]);

    },
    //取消所有的选中状态
    clearSelection() {
      this.$refs.table.toggleSelection();//传入行数组是所有的行取消选中状态，传入行数组是取消指定的几行选中状态
    },
    handlePageChange(page) {
      console.log('分页改变:', page);
      // 更新当前页码
      this.pagination.currentPage = page;
      //网络请求指定的页的数据：传入指定的第几页pagination.currentPage和每页要拿多少条数据 pagination.pageSize
      //然后重新赋值给表格数据：根据当前页码来网络请求指定的几条数
      if (this.pagination.currentPage == 1) {
        this.tableData = [
          { date: '2016-05-04', name: '0', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-03', name: '1', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-02', name: '2', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '3', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '4', address: '上海市普陀区金沙江路 1518 弄' },]
      } else if (this.pagination.currentPage == 2) {
        this.tableData = [
          { date: '2016-05-04', name: '5', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-03', name: '6', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-02', name: '7', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '8', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '9', address: '上海市普陀区金沙江路 1518 弄' },]
      } else if (this.pagination.currentPage == 3) {
        this.tableData = [
          { date: '2016-05-04', name: '10', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-03', name: '11', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-02', name: '12', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '13', address: '上海市普陀区金沙江路 1518 弄' },
          { date: '2016-05-04', name: '14', address: '上海市普陀区金沙江路 1518 弄' },]
      }
    },
    //用户点击了分页的下拉框：父亲应该修改每次的请求条数了
    handleSizeChange(size) {
      console.log('每页显示条数变化:', size);
      // 更新每页条数
      this.pagination.pageSize = size;
    }

  }
};
</script>

<style scoped>
/* 父组件的样式 */
</style>
